<template>
  <div class="container">
<!--    <el-card class="center_card" body-style="display:flex;align-items:center">

      <el-select style="width: 15%;margin-right: 50px"></el-select>
      <el-input style="width: 40%;">
        <el-button slot="append">检索</el-button>
      </el-input>
    </el-card>-->
<!--    <el-card class="center_card">
      <div style="display:flex;flex-wrap:wrap">
        <div class="book_area" v-for="(item,index) in books" :key="index">
          <el-card :body-style="{ padding: '0px' }" style="border-radius: 10px">
            <a href="/#/home/bookdetail"><img src="../../imgs/liuduo.jpg" class="image"></a>
            <div style="padding: 10px;">
              <span>{{item}}</span>
              <div class="bottom clearfix">
                <el-button type="text" class="button">加入购物车</el-buttonc>
              </div>
            </div>
          </el-card>
        </div>
      </div>
      <el-pagination></el-pagination>
    </el-card>-->
    <el-card class="center_card">
      <h3 style="margin: 0" slot="header">图书推荐</h3>
      <book-list :book-list="books"></book-list>
      <el-pagination></el-pagination>
    </el-card>
  </div>
</template>

<script>
  import axios from 'axios'
  import BookList from "../../reusable/BookList";
export default {
name: "Recommend",
  components:{BookList},
  data(){
  return{
    books:[],
  }
  },
  mounted() {
  this.getRecommendBooks()
  },
  methods:{
    getRecommendBooks(){
      axios.post('/api/book/getRecommendTrue').then((res)=>{
        this.books=res.data.data
        console.log(this.books)
      })
    },
  }
}
</script>

<style scoped>
.container{
  width: 100%;
}
.center_card{
  width: 70%;
  margin: auto;
}
  .center{
    width: 70%;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .book_area{
    width: 20%;
    display: flex;
    justify-content: center;
    margin: 10px 0 10px 0;
  }
  .image{
    width: 225px;
    height: 250px;
  }

</style>
